<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<!-- View -->
<p id="oP"></p>
<input type="text" id="oInput">
<script>
const data = {
  str: 'hello',
  xxx: 'world'
}

// 生成一个 data 的代理
// 代理把我的数据删了，其实原始的 data 也没了
// 代理把我的数据改了，原始的数据也改了
const proxyData = new Proxy(data, {
  get(target, key) {
    // console.log(target === data) // true
    // 获取数据的时候会触发这里
    return target[key]
  },
  set(target, key, value) {
    // 设置数据的时候会触发这里
    target[key] = value
    oP.innerHTML = value
    oInput.value = value
  }
});
oInput.oninput = function(e) {
  // proxyData.str = e.target.value
  proxyData.abc = e.target.value
}
</script>
</body>
</html>